{{! Project details (ADR 0062, 0168): filled in from the project whose page it is — the name (the services may be under it) and short description, the details people typed (labels in the site's language), the features as an Icon list, the link to the live work (a new tab) and the cover picture. The details box is left out when nothing in it is filled in. On other pages the editor shows a note; visitors see nothing. }}
<div {{@attrs}}>{{#hasProject}}<div class="sv-project-details__main">{{#showHeading}}<div class="sv-project-details__head">{{#showCategory}}{{#category.name}}<p class="sv-project-details__category">{{category.name}}</p>{{/category.name}}{{/showCategory}}<{{level}} class="sv-project-details__title">{{title}}</{{level}}>{{#servicesUnder}}{{#servicesText}}<p class="sv-project-details__subtitle">{{servicesText}}</p>{{/servicesText}}{{/servicesUnder}}{{#showExcerpt}}{{#excerpt}}<p class="sv-project-details__text">{{excerpt}}</p>{{/excerpt}}{{/showExcerpt}}</div>{{/showHeading}}{{#hasAside}}<div class="sv-project-details__aside{{#boxed}}{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}}{{/style}}{{/boxed}}"{{#boxed}}{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}{{/boxed}}><dl class="sv-project-details__facts{{^boxed}}{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}}{{/style}}{{/boxed}}"{{^boxed}}{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}{{/boxed}}>{{#showClient}}{{#client}}<div class="sv-project-details__fact"><dt>{{labels.client}}</dt><dd>{{client}}</dd></div>{{/client}}{{/showClient}}{{#showYear}}{{#year}}<div class="sv-project-details__fact"><dt>{{labels.year}}</dt><dd>{{year}}</dd></div>{{/year}}{{/showYear}}{{#showDuration}}{{#duration}}<div class="sv-project-details__fact"><dt>{{labels.duration}}</dt><dd>{{duration}}</dd></div>{{/duration}}{{/showDuration}}{{#servicesInDetails}}<div class="sv-project-details__fact"><dt>{{labels.services}}</dt><dd class="sv-project-details__services">{{#services}}<span>{{name}}</span>{{/services}}</dd></div>{{/servicesInDetails}}{{#showLocation}}{{#location}}<div class="sv-project-details__fact"><dt>{{labels.location}}</dt><dd>{{location}}</dd></div>{{/location}}{{/showLocation}}</dl>{{#showFeatures}}{{#hasFeatures}}<div class="sv-project-details__features"><p class="sv-project-details__label">{{labels.features}}</p><ul class="sv-icon-list sv-icon-list--icon-size-md sv-icon-list--text-size-md sv-icon-list--columns-1 sv-icon-list--gap-md">{{#features}}<li class="sv-icon-list__item"><span class="sv-icon-list__icon" aria-hidden="true"><span class="sv-icon__glyph sv-glyph-{{featureIcon}}"></span></span><span class="sv-icon-list__text">{{text}}</span></li>{{/features}}</ul></div>{{/hasFeatures}}{{/showFeatures}}{{#showLink}}{{#link}}<div class="sv-project-details__action"><div class="sv-button sv-button--variant-primary"><a class="sv-button__control sv-button__control--arrow" href="{{link}}" target="_blank" rel="noopener noreferrer"{{@edit linkLabel}}>{{#linkLabel}}{{linkLabel}}{{/linkLabel}}{{^linkLabel}}{{labels.link}}{{/linkLabel}}</a></div></div>{{/link}}{{/showLink}}</div>{{/hasAside}}{{^hasAside}}{{#nothingShown}}{{@placeholder project-empty}}{{/nothingShown}}{{/hasAside}}</div>{{#showCover}}{{#image.url}}<figure class="sv-project-details__cover{{#coverShape}} sv-project-details__cover--{{coverShape}}{{/coverShape}} sv-round-{{corners}}"><img class="wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} decoding="async"></figure>{{/image.url}}{{/showCover}}{{/hasProject}}{{^hasProject}}{{#ready}}{{@placeholder project}}{{/ready}}{{^ready}}{{@placeholder loading-projects}}{{/ready}}{{/hasProject}}</div>